<template>
    <div class="card-items">
        <div class="head-part">
            <div class="title">
                <img src="@/assets/van-img.png" alt="" />
                <span>{{dataItem.title}}</span>
            </div>
            <van-popover v-model:show="showPopover" v-if="dataItem.title != '营业厅'" :actions="actions" @select="onSelect">
                <template #reference>
                    <div class="qs-text">{{selectName}} <van-icon name="arrow-down" /></div>
                </template>
            </van-popover>
        </div>
        <div class="desc-panel">
            <div class="left-desc">
                <span class="text1">当月满意度</span>
                <span class="text2">{{dataItem.monthSatisfaction}}</span>
                <span class="text1">排名</span>
                <span class="text2">{{dataItem.ranking}}</span>
            </div>
            <div class="right-desc">环比<span style="color:#10CFA5">{{dataItem.hb}}</span></div>
        </div>
        <lineEcharts :chartObj="chartObj" :cindex="dataItem.index" />
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import lineEcharts from "@/components/lineEcharts.vue"
export default {
    props: ["itemObj"],
    components: {
        lineEcharts
    },
    setup(props) {
        const state = reactive({
            showPopover: false,
            dataItem: props.itemObj,
            selectName: "全省趋势",
            actions: [{ text: "全省趋势" }, { text: "分公司排名" }],
            chartObj: {}
        })
        //一级tab切换
        function tabClick(val) {
            state.tabIndex = val
        }
        const onSelect = (action) => {
            state.selectName = action.text
            if (state.selectName == "分公司排名") {
                state.dataItem.chartObj.xAxisData = [
                    "南京",
                    "泰州",
                    "无锡",
                    "南通",
                    "苏州",
                    "盐城",
                    "扬州",
                    "淮安",
                    "常州",
                    "宿迁",
                    "镇江",
                    "徐州",
                    "连云港"
                ]
                state.chartObj = {
                    iscity: true,
                    ...state.dataItem.chartObj
                }
            } else {
                state.dataItem.chartObj.xAxisData = [
                    "10/01",
                    "10/02",
                    "10/03",
                    "10/04",
                    "10/05",
                    "10/06",
                    "10/07",
                    "10/08",
                    "10/09",
                    "10/10"
                ]
                state.chartObj = {
                    iscity: false,
                    ...state.dataItem.chartObj
                }
            }
        }
        onMounted(() => {
            state.chartObj = state.dataItem.chartObj
        })
        return {
            ...toRefs(state),
            tabClick,
            onSelect
        }
    }
}
</script>
<style lang="scss" scoped>
.card-items {
    width: 100%;
    height: 274px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 2px 10px;
    margin-bottom: 10px;
    .head-part {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .qs-text {
            padding: 0 15px;
            line-height: 24px;
            color: #666666;
            margin-right: 10px;
            font-size: 12px;
            background: #ffffff;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }
    }
    .title {
        width: 50%;
        display: flex;
        align-items: center;
        span {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
        }
    }
    .tab-btn {
        width: calc(100% - 8px);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 8px 0 0 8px;
        overflow-x: auto;
        .btn-select {
            padding: 6px 13px;
            background: linear-gradient(285deg, #fe6800 0%, #ff9900 100%);
            border-radius: 12px;
            color: #ffffff;
            white-space: nowrap;
            font-size: 13px;
            margin-right: 4px;
        }
        .btn-unselect {
            padding: 6px 13px;
            background: #f3f3f3;
            border-radius: 12px;
            color: #333333;
            white-space: nowrap;
            font-size: 13px;
            margin-right: 4px;
        }
    }
    .desc-panel {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .left-desc {
            font-size: 14px;
            .text1 {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                margin-right: 6px;
            }
            .text2 {
                font-size: 21px;
                font-weight: bold;
                color: #333333;
                margin-right: 6px;
            }
        }
        .right-desc {
            padding: 0 10px;
            height: 24px;
            line-height: 24px;
            margin-right: 10px;
            background: #fff0dc;
            color: #333333;
            border-radius: 4px;
            font-size: 12px;
            text-align: center;
        }
    }
}
</style>